<!--
 * @Author: Wangtao
 * @Date: 2022-05-17 22:46:34
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-05-31 18:38:26
-->
<template>
  <div class="label-box">
    <div class="label-title">
      标签<span style="margin-left: 10px" v-show="!isPreview">最多选3个</span>
    </div>
    <div>
      <el-select
        v-model="labelIds"
        multiple
        class="labelIds-class"
        :disabled="isPreview"
        :placeholder="isPreview ? '未选择标签' : '请选择标签'"
        :class="[isPreview ? 'isPreview' : '']"
        @change="labelChange"
      >
        <el-option
          v-for="item in selectList"
          :key="item._id"
          :disabled="labelIds.length >= 3 && labelIds.indexOf(item._id) === -1"
          :label="item.name"
          :value="item._id"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import { deepClone } from '@/utils/m7Utils'
export default {
  name: 'knowledgeLabel',
  data () {
    return {
      selectList: [],
      labelIds: []
    }
  },
  props: ['tagList', 'isPreview'],
  watch: {
    tagList: {
      deep: true,
      handler: function (value) {
        let setArr = value;
        if (this.selectList && this.selectList.length > 0) {
          let arr = [];
          this.selectList.forEach((item) => {
            if (value.indexOf(item._id) > -1) {
              arr.push(item._id)
            }
          })
          setArr = arr;
        }
        this.$set(this, 'labelIds', deepClone(setArr));
      }
    },
    selectList: {
      deep: true,
      immediate: true,
      handler: function (value) {
        if (value && value.length) {
          let setArr = []
          value.forEach((item) => {
            if (this.tagList && this.tagList.length) {
              if (this.tagList.indexOf(item._id) > -1) {
                setArr.push(item._id);
              }
            }
          })
          this.$set(this, 'labelIds', deepClone(setArr));
        }
      }
    }
  },
  mounted () {
    this.fetchData();
  },
  methods: {
    fetchData () {
      this.tableLoading = false
      this.$store.dispatch('queryKmTags', {}).then((resp) => {
        if (resp.list) {
          // this.selectList = resp.list;
          this.$set(this, 'selectList', resp.list)
          this.tableLoading = true
        }
      })
    },
    labelChange (ids) {
      this.$emit('change', ids)
    }
  },
  components: {

  }
}
</script>
<style lang="stylus" scoped>
.labelIds-class
  >>>.el-tag
    display flex
    align-items center
  >>>.el-select__tags-text
    display inline-block
    max-width 40px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
>>>.isPreview
  .el-input__suffix-inner
    display none
  .el-input.is-disabled .el-input__inner
    background transparent
    border-color transparent
    padding-left 0
  .el-tag
    margin-left 0
    margin-right 2px
.label-box
  margin 10px 0 10px
.label-title
  margin-bottom 5px
</style>
